<template>
  <div class="articleDetail">
    <!-- 文章详情头部 -->
    <van-nav-bar title="文章详情" left-text="返回" left-arrow fixed>
      <template #left>
        <van-icon name="arrow-left" size="18" @click="$router.back()" />
      </template>
    </van-nav-bar>
    <div class="articleBox">
      <van-cell>
        <span class="art_title">{{articleDetail.title}}</span>
        <div class="art_aut">
          <div class="art_avar">
            <van-image
              round
              width="60px"
              height="60px"
              :src="articleDetail.aut_photo"
            />
            <div class="aut_name">
              <span>每日新闻</span>
              <!-- <span>{{articleDetail.pubdate}}</span> -->
           
            </div>
          </div>
          <van-button size="mini" type="info" v-if="articleDetail.is_followed" @click="cancelAttentionUser">已关注</van-button>
          <van-button icon="plus" size="mini" plain type="info" v-else @click="attentionUser">关注</van-button>
        </div>
      </van-cell>
      <div class="art_content" v-html="articleDetail.content"></div>
      <van-divider>END</van-divider>
      <div class="banBtn">
        <van-button icon="good-job" size="mini" type="danger" v-if="articleDetail.attitude === 1" @click="cancelGiveALike">已点赞</van-button>
        <van-button icon="good-job-o" size="mini" plain type="danger" v-else @click="giveALike">点赞</van-button>
      </div>
      <!-- 评论 -->
      <div class="comment">
        <span class="commentTitle">文章评论</span>
        <van-empty description="暂无评论" v-if="commentList.length === 0" />
        <div class="commentList" v-else>
          <div class="commentItem" v-for="item in commentList" :key="item.art_id">
            <!-- 评论者信息 -->
            <div class="aut_box">
              <div class="sut_item">
                <van-image round width="30px" height="30px" :src="item.aut_photo"/>
                <span class="aut_name">{{item.aut_name}}</span>
              </div>
              <div class="likeComment">
                <van-icon name="like" color="red" @click="cancelGiveALikeToComment(item.com_id)" v-if="item.is_liking" />
                <van-icon name="like-o" @click="giveALikeToComment(item.com_id)" v-else />
              </div>
            </div>
            <!-- 评论内容 -->
            <div class="commentContent">
              <span>{{item.content}}</span>
            </div>
            <div class="commentTime">
              <!-- <span>{{timeAgo(item.pubdate)}}12</span> -->
               <span>刚刚</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 文章底部 -->
    <div class="art_footer">
      <van-icon name="arrow-left" @click="$router.back()" />
      <span class="inputBox" @click="popupShow">发表评论</span>
      <van-badge :content="commentCount">
        <van-icon name="comment-o" @click="commentClickFn" />
      </van-badge>
      <van-icon v-if="articleDetail.is_collected" color="red" name="star" @click="cancelCollectArticle" />
      <van-icon v-else name="star-o" @click="collectArticle" />
      <van-icon name="share-o" />
    </div>
    <van-popup v-model="popupIsShow" :overlay="false" position="bottom" duration="0.1">
      <div class="commentBox">
        <div class="content">
          <van-field
            v-model="commentMessage"
            rows="3"
            label=""
            autofocus
            ref="getFocus"
            type="textarea"
            @blur="cancelComment"
            placeholder="请输入评论"
          />
        </div>
        <span class="send" @click="sendComment">发布</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getArticleDetailAPI, attentionUserAPI, cancelAttentionUserAPI, giveALikeAPI, cancelGiveALikeAPI, collectArticleAPI, cancelCollectArticleAPI, getArticleCommentAPI, giveALikeToCommentAPI, cancelGiveALikeToCommentAPI, publishedCommentAPI } from '@/api'
import { timeAgo } from '@/untils/date'
export default {
  data () {
    return {
      articleDetail: {},
      popupIsShow: false,
      commentList: [],
      commentCount: 0,
      commentMessage: ''
    }
  },
  created () {
    this.getArticleDetail(this.$route.params.art_id)
    this.getArticleComment('a', this.$route.params.art_id)
  },
  methods: {
    // 获取文章详情
    async getArticleDetail (art_id) {
      const res = await getArticleDetailAPI(art_id)
      res.data.data.content = res.data.data.content.replace(/blockquote/g, 'p')
      res.data.data.content = res.data.data.content.replace(/code/g, 'p')
      res.data.data.content = res.data.data.content.replace(/pre/g, 'div')
      this.articleDetail = res.data.data
    },
    // 获取文章评论
    async getArticleComment (type, source) {
      const res = await getArticleCommentAPI({ type, source })
      this.commentList = res.data.data.results
      this.commentCount = res.data.data.total_count
    },
    // 关注用户
    async attentionUser () {
      await attentionUserAPI({ target: this.articleDetail.aut_id })
      this.getArticleDetail(this.articleDetail.art_id)
      this.$toast('关注成功！')
    },
    // 取消关注
    cancelAttentionUser () {
      this.$dialog.confirm({
        message: '是否取消关注？'
      }).then(async () => {
        await cancelAttentionUserAPI({ target: this.articleDetail.aut_id })
        this.getArticleDetail(this.articleDetail.art_id)
      })
    },
    // 点赞
    async giveALike () {
      await giveALikeAPI({ target: this.articleDetail.art_id })
      this.getArticleDetail(this.articleDetail.art_id)
      this.$toast('点赞成功！')
    },
    // 取消点赞
    cancelGiveALike () {
      this.$dialog.confirm({
        message: '是否取消点赞？'
      }).then(async () => {
        await cancelGiveALikeAPI({ target: this.articleDetail.art_id })
        this.getArticleDetail(this.articleDetail.art_id)
      })
    },
    // 收藏文章
    async collectArticle () {
      await collectArticleAPI({ target: this.articleDetail.art_id })
      this.getArticleDetail(this.articleDetail.art_id)
      this.$toast('收藏成功！')
    },
    // 取消收藏
    cancelCollectArticle () {
      this.$dialog.confirm({
        message: '是否取消收藏？'
      }).then(async () => {
        await cancelCollectArticleAPI({ target: this.articleDetail.art_id })
        this.getArticleDetail(this.articleDetail.art_id)
      })
    },
    // 对评论进行点赞
    async giveALikeToComment (target) {
      await giveALikeToCommentAPI({ target })
      this.getArticleComment('a', this.$route.params.art_id)
      this.$toast('点赞成功！')
    },
    // 取消对评论的点赞
    cancelGiveALikeToComment (target) {
      this.$dialog.confirm({
        message: '是否取消点赞？'
      }).then(async () => {
        await cancelGiveALikeToCommentAPI({ target })
        this.getArticleComment('a', this.$route.params.art_id)
      })
    },
    timeAgo,
    // 获取评论焦点
    popupShow () {
      this.popupIsShow = true
      this.$nextTick(() => {
        this.$refs.getFocus.focus()
      })
    },
    cancelComment () {
      this.popupIsShow = false
    },
    // 发表评论
    async sendComment () {
      if (!this.commentMessage) {
        return this.$notify({ type: 'warning', message: '请输入评论内容' })
      }
      await publishedCommentAPI({ target: this.articleDetail.art_id, content: this.commentMessage })
      this.commentMessage = ''
      this.$toast('评论成功')
      this.getArticleComment('a', this.$route.params.art_id)
    },
    // 评论按钮的锚点跳转
    commentClickFn () {

      
      const articleHeight = document.querySelector('.art_content').scrollHeight
      window.scrollTo(0, articleHeight + 100)
    }
  }
}
</script>

<style lang="less" scoped>
  .articleDetail {
    padding-bottom: 80px;
    box-sizing: border-box;
    width: 100%;
  }
  .articleBox {
    margin-top: 46px;
  }
  .van-nav-bar {
    background-color: pink;
  }
  /deep/ .van-nav-bar__title, .van-nav-bar /deep/ .van-icon {
    color: #fff;
  }
  .art_title {
    font-size: 14px;
    font-weight: 700;
  }
  .art_aut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .art_avar {
      display: flex;
      align-items: center;
      .aut_name {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        span:first-child {
          font-size: 14px;
          color: #323232;
        }
        span:last-child {
          font-size: 12px;
          color: #969696;
        }
      }
    }
    /deep/ .van-button::before {
      background: #1989fa;
    }
  }
  .van-cell {
    border-bottom: 1px solid #eee;
  }
  .art_content {
    padding: 10px 15px;
    font-size: 14px;
    /deep/ p,
    /deep/ li {
      font-size: 14px;
      font-weight: normal;
    }
    /deep/ span {
      font-size: 14px !important;
    }
    /deep/ h1,
    /deep/ h2,
    /deep/ h3,
    /deep/ h4,
    /deep/ h6,
    /deep/ h5 {
      font-size: 16px;
    }
    /deep/ code {
      font-size: 14px;
    }
  }
  .banBtn {
    text-align: center;
    line-height: 24px;
  }
  .art_footer {
    height: 46px;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid #eee;
    padding: 0 10px;
    box-sizing: border-box;
    .van-icon {
      font-size: 20px;
    }
    .inputBox {
      width: 200px;
      height: 30px;
      line-height: 30px;
      background-color: #f8f8f8;
      border: 1px solid #efefef;
      border-radius: 15px;
      font-size: 12px;
      color: #333;
      padding-left: 10px;
      box-sizing: border-box;
    }
  }
  .commentList {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    box-sizing: border-box;
    .commentItem {
      border-bottom: 1px solid #eee;
      padding: 20px 0;
      .aut_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .sut_item {
          display: flex;
          align-items: center;
          .aut_name {
            font-size: 16px;
            color: #333;
            margin-left: 10px;
          }
        }
      }
      .commentContent {
        margin: 10px 20px;
        padding: 10px;
        border-radius: 10px;
        font-size: 14px;
        color: #333;
        // border: 1px solid #f1f1f1;
        background: #f7f7f7;
      }
      .commentTime {
        margin-top: 10px;
        margin-left: 20px;
        font-size: 12px;
        color: #666;
      }
    }
    .commentItem:first-child {
      padding-top: 0;
    }
  }
  .likeComment {
    .van-icon {
      font-size: 16px;
    }
  }
  .commentBox {
    display: flex;
    align-items: center;
    padding: 10px;
    border-top: 1px solid #eee;
    .van-field {
      width: 300px;
      border: 1px solid #efefef;
      border-radius: 10px;
      background-color: #f8f8f8;
    }
    .send {
      font-size: 14px;
      font-weight: 600;
      color: #666;
      margin-left: 20px;
    }
  }
  /deep/ .van-badge--fixed {
    top: 10px;
  }
  .commentTitle {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin: 20px 15px;
    padding: 10px;
    background: #e2f0ff;
    border-left: 10px solid #1989fa;
  }
</style>
